<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX后台管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css">
    <style>
        .layui-upload {
            text-align: center;
            width: 180px;
            height: 180px;
            margin-right: 20px;
        }

        .layui-upload-list {
            height: 96px;
            width: 100%;
        }

        .layui-upload-img {
            width: 100%;
            height: 100%;
            border: solid #666666 1px;
        }
    </style>
</head>
<body>
<br/>
<br/>
<fieldset class="layui-elem-field" style="width: 100%;">
    <legend>首页 - 轮播</legend>
    <div class="layui-field-box" style="width: 100%">
        <div style="display: flex;justify-content: flex-start;width: 100%">
            <#if (imgs?size>0)>
            <#list imgs as img>

            <div class="layui-upload">
                <span class="layui-badge-rim">${img.index_side_paper}</span>
                <div class="layui-upload-list">
                    <img src="/img/IndexSidePhoto/${img.index_side_img_path}" name="${img.index_side_id}"
                         class="layui-upload-img uploadImg"
                         lay-data="{url:'upload_index_lunbo_img?id=${img.index_side_id}',id:'${img.index_side_id}'}">
                    <p id="demoText"></p>
                </div>
                <a href="delete_index_lunbo?index_side_id=${img.index_side_id}"
                   class="layui-btn layui-btn-sm ">删除</a>
            </div>
        </#list>
    </#if>
    <div class="layui-upload uploadImg" lay-data="{url:'upload_index_lunbo_img?id=-1',id:'-1'}">
        <span class="layui-badge-rim">+</span>
        <div class="layui-upload-list">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540463362967&di=7173d980eb46b757953f8c87ea91cdd0&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F99%2F26%2F58458PICy6B_1024.jpg"
                 class="layui-upload-img" id="demo">
            <p id="demoText"></p>
        </div>
        <button class="layui-btn layui-btn-sm ">添加</button>
    </div>
    </div>
    </div>
</fieldset>
<#if msg??>
${msg}
</#if>
<script>
    layui.use('upload', function () {
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: '.uploadImg'
            // ,url: '/upload/'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                var imgId = this.id;
                obj.preview(function (index, file, result) {
                    $("img[name='" + imgId + "']").attr('src', result);
                });
            }
            , done: function (res) {
                //如果上传失败
                console.log(res);
                if (res.code > 0) {
                    layer.alert("上传失败")
                    return layer.msg('上传失败');
                } else {
                    layer.confirm('上传成功', {
                        btn: ['确定'] //可以无限个按钮
                        ,
                    }, function (index, layero) {
                        location.href = "index_lunbo_page";
                    });
                    // location.reload();
                }
                //上传成功

            }
            , error: function (error) {
                layer.alert("上传失败");
            }
        });
    });
</script>
</body>
</html>